<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/inc/css.inc"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>大讲堂</title>
		<link rel="stylesheet" href="${css}/amazeui.css" />
		<link rel="stylesheet" href="${css}/classplay.css" />
		<script src="${js}/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${js}/mui.min.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
		<script src="http://203.195.235.76/jssdk/js/demo.js"> </script>
	</head>
	<body>
		<div class="box">
			<div class="header">
				在线大讲堂
				<span><a href="${syllabus.coursewareUrl}">课件<a/></span>
			</div>
			<div class="content">
				<article class="am-comment">
					<a href=""><img class="am-comment-avatar" src="${img}/userimg.png" alt=""/></a>
					<audio src="http://youyalianhe.laogay.com/web/test/Untitled.mp3" style="display:block" id="musicBox" preload="metadata" controls autoplay="false" preload="auto" ></audio>
				  <div class="am-comment-main">
				    <header class="am-comment-hd">
				      <!--<h3 class="am-comment-title">评论标题</h3>-->
				      <div class="am-comment-meta">				       
				 		<img width="20px" src="${img}/wifi.gif" />
				      </div>
				    </header> 
				  </div>
				</article>
			</div>
			<div class="footer">
				<div class="footer-left">
					<input id="chatmsg" type="text" class="" placeholder="请输入您的问题" />
				</div>
				<div class="footer-right">
					<img class="publishbtn" height="36px" src="${img}/publish.png" onclick="publishmsg()"/>
					<img class="msgbtn" height="36px" src="${img}/message.png" />
				</div>
			</div>
		</div>
		<!--评论区展示-->
		<div class="msgbox">
			<div class="msgcont">
				<a href="" class="am-close am-close-alt closebtn">&times;</a>
				<div id="msglistbox" class="msglistbox">
					<ul class="am-comments-list pinglun mui-table-view mui-table-view-chevron">
						
					</ul>
				</div>			
			</div>
		</div>
		<script>
			/* wx.config({
      debug: false,
      appId: 'wxb72f527fa727f087',
      timestamp: ${sign.timestamp}, // 必填，生成签名的时间戳
      nonceStr: '${sign.nonceStr}',// 必填，生成签名的随机串
      signature: '${sign.signature}',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'onVoicePlayEnd',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ]
  }); */

	/* var media = document.getElementById("musicBox");
	wx.ready(function () {
		//算时间
	    media.play();
			//alert("开始播放");
			media.currentTime=600;
		
	}); */
		
			 mui.init({
				pullRefresh: {
					container: '#msglistbox',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				var userType = 0;
		  		var syllabusId = 1;
		  		var data='';
		  		$.ajax({
		  			type:"post",
					url:"<%=basePath%>interflowAllSyllabus.action",
					async:false,
					data:{syllabusId: syllabusId, userType: userType},
					success:function(v){
						//alert(JSON.stringify(v))
						/* for(var i=0;i<v.content.length;i++){
							$(".pinglun").append('<li class="am-comment border-b-no"><a href="#link-to-user-home"><img src="${img}/bbsbanner.png" alt="" class="am-comment-avatar" width="48" height="48"/></a> <div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta"><a href="#link-to-user" class="am-comment-author">'+v.content[i].nickName+'</a></div></header><div class="am-comment-bd border-b ptcont">'+v.content[i].message+'  </div></div></li>')
						} */
						//mui('#msglistbox').pullRefresh().pullupLoading();
						alert(v.content.length)
						data=v.content;
						syllabusId=(v.content.length+10-1)/10;
					}
		  		});
			
				setTimeout(function() {
					mui('#msglistbox').pullRefresh().endPullupToRefresh((++count > syllabusId)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 10; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<li class="am-comment border-b-no"><a href="#link-to-user-home"><img src="${img}/bbsbanner.png" alt="" class="am-comment-avatar" width="48" height="48"/></a> <div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta"><a href="#link-to-user" class="am-comment-author">'+data[i].nickName+'</a></div></header><div class="am-comment-bd border-b ptcont">'+data[i].message+'  </div></div></li>';
						table.appendChild(li);
					}
				}, 1500);
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#msglistbox').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#msglistbox').pullRefresh().pullupLoading();
				});
			} 		  	
		  	
		  	//按钮事件
		  	
		  	//留言展示
		  	$(".msgbtn").click(function(){
		  		$(".msgbox").fadeIn(300);		  		
		  	})
		  	
		  	//发送留言
		  	function publishmsg(){
		  		var message = $("#chatmsg").val();
		  		var id = 1;
		  		var syllabusId = 1;
		  		var userType = 0;
		  		alert(message);
		  		if(message!=''){
		  			$.ajax({
		  				type:"post",
				   		url:"<%=basePath%>addInterflow.action",
				   		async:false,
				   		data:{userId: id, message: message, syllabusId: syllabusId, userType: userType},
				   		success:function(v){
				   			switch(v.type){
				   				case 200:
				   					alert("发言成功");
				   				case 201:
				   					alert("发言失败");
				   			}
				   		}
		  			});
		  		}
		  	}
		  	
		  	//关闭展示
		  	$(".closebtn").click(function(){
		  		$(".msgbox").fadeOut(300);
		  	})
		</script>
	</body>
</html>
